<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">账号：</text>
				<input type="number" v-model="regData.login" placeholder="手机号">
			</view>
			<view class="input-row border reg-code">
				<text class="title">验证码：</text>
				<input type="text" v-model="regData.code" placeholder="验证码">
				<text class="cus-default" v-if="isWait">正在发送...</text>
				<text class="cus-primary" v-else @click="getCode()">获取验证码</text>
			</view>
			<view class="input-row border">
				<text class="title">密码：</text>
				<input type="text" password="true" v-model="regData.pwd" placeholder="请输入密码">
			</view>
			<view class="input-row">
				<text class="title">确认密码：</text>
				<input type="text" password="true" v-model="regData.confirm_pwd" placeholder="请再一次输入密码">
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="register">提交</button>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';

	export default {
		data() {
			return {
				regData: {
					login: '',
					code: '',
					confirm_code: '',
					pwd: '',
					confirm_pwd: '',
					type: '1'
				},
				isWait: false
			}
		},
		onLoad(params) {
			this.regData.type = params.type
			if (params.type === '0') {
				uni.setNavigationBarTitle({
					title: '重置密码'
				});
			}
			const loginData = uni.getStorageSync("loginData")
			if (loginData && loginData.name) {
				this.regData.login = loginData.name
			}
		},
		methods: {
			register() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.regData.login.length !== 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					});
					return;
				}
				if (this.regData.code !== this.regData.confirm_code) {
					uni.showToast({
						icon: 'none',
						title: '验证码不正确'
					});
					return;
				}
				if (this.regData.pwd.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				if (this.regData.pwd !== this.regData.confirm_pwd) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一样'
					});
					return;
				}
				uni.showLoading()
				this.$request({
					url: this.$store.state.baseUrl + '/lwj/app_registered',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: this.regData,
					success: res => {
						if (res.data.code === 1) {
							uni.showToast({
								title: res.data.msg,
								duration: 3000
							});
							// uni.navigateBack({
							// 	delta: 1
							// });
							uni.reLaunch({
								url: '../main/main'
							})
							uni.setStorageSync("loginData", {
								name: this.regData.login,
								password: this.regData.pwd
							})
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									}
								}
							});
						}
					},
					fail: () => {},
					complete: () => {
					}
				});
			},
			getCode() {
				if (this.isWait) return
				const reg = /^1[0-9]{10,10}$/
				if (!reg.test(this.regData.login)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000
					})
					return
				}
				this.isWait = true
				uni.request({
					url: this.$store.state.baseUrl + '/lwj/send_app_message',
					method: 'POST',
					header: {
						token: this.$store.state.token
					},
					data: {
						mobile: this.regData.login
					},
					success: res => {
						if (res.data.code === 1) {
							this.regData.confirm_code = res.data.data.code
							setTimeout(() => {
								this.isWait = false
							}, 180000)
						} else {
							this.isWait = false
						}
					},
					fail: () => {
						this.isWait = false
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	.reg-code input {
		width: 40%;
	}

	.input-row .title {
		width: 25%;
	}
</style>
